<template>
  <el-dialog title="分配角色" :visible="showDialog" @close="closeFn">
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>

    </el-checkbox-group>
    <span slot="footer">
      <el-button size="small" type="primary" @click="submit">确定</el-button>
      <el-button size="small" @click="closeFn">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getRoleList } from '../../../api/setting'
import { getEmployeesById } from '../../../api/user'
import { addignRoles } from '../../../api/employee'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkList: ['系统管理员'],
      roleList: [],
      curId: ''
    }
  },
  async  created() {
    const res = await getRoleList({
      page: 1,
      pagesize: 1000
    })
    this.roleList = res.rows
  },
  methods: {
    async    submit() {
      await addignRoles({
        id: this.curId,
        roleIds: this.checkList
      })
      this.closeFn()
    },
    async    getEmployeesDetail() {
      const result = await getEmployeesById(this.curId)
      console.log('43行result: ', result)
      this.checkList = result.roleIds
    },
    closeFn() {
      /**
     * vue提供了一个修饰符，使得我们可以在子组件中直接修改
     * 父组件传递过来的数据，这个修饰符就是sync
     * 语法：
     * 1、在父组件中，传递数据的时候，添加sync修饰符
     *  <AddDept :show-dialog.sync="showDialog" />
     * 2、子子组件中，通过自定义事件进行修改
     *  语法：this.$emit('update:要修改的props中的变量名', 新的值)
     * */
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
